<template>
  <div class="button-component">
    
    <el-button 
      :type="datas.type" 
      :size="datas.size" 
      :plain="datas.plain" 
      :round="datas.round" 
      :circle="datas.circle"
      :disabled="datas.disabled"
      :style="buttonStyle"
      @click="handleButtonClick"
    >
      <!-- 圆形按钮只显示图标 -->
      <template v-if="datas.circle">
        <el-icon><component :is="datas.icon || 'Edit'" /></el-icon>
      </template>
      
      <!-- 非圆形按钮，图标在左侧 -->
      <template v-else-if="datas.icon && (!datas.iconPosition || datas.iconPosition === 'left')">
        <el-icon><component :is="datas.icon" /></el-icon>
        <span>{{ datas.buttonText }}</span>
      </template>
      
      <!-- 非圆形按钮，图标在右侧 -->
      <template v-else-if="datas.icon && datas.iconPosition === 'right'">
        <span>{{ datas.buttonText }}</span>
        <el-icon class="el-icon--right"><component :is="datas.icon" /></el-icon>
      </template>
      
      <!-- 无图标只显示文字 -->
      <template v-else>
        {{ datas.buttonText }}
      </template>
    </el-button>

  </div>
</template>

<script>
export default {
  name: 'ew-button',
  props: {
    datas: {
      type: Object,
      required: true
    }
  },
  computed: {
    buttonStyle() {
      // 基础样式
      const style = {
        width: this.datas.width,
        height: this.datas.height
      };
      
      // 只有当自定义颜色的属性都存在时才应用自定义样式
      const hasCustomColor = this.datas.backgroundColor && this.datas.textColor && this.datas.borderColor;
      
      if (hasCustomColor) {
        // 朴素按钮(plain)不应用背景色
        if (!this.datas.plain) {
          style.backgroundColor = this.datas.backgroundColor;
        }
        style.color = this.datas.textColor;
        style.borderColor = this.datas.borderColor;
      }
      
      return style;
    }
  },
  methods: {
    // 按钮点击处理函数
    handleButtonClick(event) {
      console.log('按钮被点击了:',event);
    }
  }
}
</script>

<style scoped lang="less">
.button-component {
  position: relative;
  display: flex;
  width: 100%;
  height: 100%;
  box-sizing: border-box;

  :deep(.el-button) {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    margin: 0;
    box-sizing: border-box;
    // 按钮需要保持在覆盖层下方
    z-index: 1;
    // 按钮仍然需要保持点击能力，但它被覆盖层挡住了
    pointer-events: auto;
    
    // 图标与文本间距
    .el-icon + span {
      margin-left: 6px;
    }
    
    // 图标在右侧的间距
    .el-icon--right {
      margin-right: 0;
      margin-left: 6px;
    }
    
    // 圆形按钮内图标居中
    &.is-circle .el-icon {
      margin: 0;
    }
  }
}
</style> 